<template>
  <div class="forget-box">
    <div class="forget-form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="loginName"
          name="账号"
          label="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          minlenth=5
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="phonenumber"
          type="number"
          name="手机号"
          label="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <div class="verification">
          <van-field
            v-model="code"
            name="验证码"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
            class="code"
          />
          <van-button type="default" class="get-code" @click="getCode">点击获取</van-button>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click="getForget">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { code } from "../../api/forum-api";
import { forget } from "../../api/forum-api";
export default {
  data() {
    return {
      loginName: "",
      password: "",
      phonenumber: "",
      code: ""
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.$router.push("/login");
    },
    //获取验证码
    getCode() {
      code(this.phonenumber).then(code => {
        console.log(code);
      });
    },
    //忘记密码
    getForget() {
      forget(this.loginName, this.password, this.phonenumber, this.code).then(res=>{
            console.log(res)
        })
    }
  }
};
</script>
<style lang="less" scoped>
.forget-box {
  .forget-form {
      margin: 20% auto;
    width: 80%;
    //验证码
    .verification {
      display: flex;
      .get-code {
        flex: 3;
        margin-top: 5px;
        height: 34px;
      }
      .code {
        flex: 7;
      }
    }
  }
}
</style>